import React, { Component } from 'react';
import DomHelper from './domHelper';
import { MeshHelper } from '../stereoHelper';
import LoaderHelper from './Loaders/loaderHelper';

class Renderer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loaded: false
        };
    }

    componentWillMount() {
        const { selectWidgetsByIds, updateWidget } = this.props;
        this.selectWidgetsByIds = selectWidgetsByIds;
        this.updateWidget = updateWidget;
    }

    componentDidMount() {
        this.container = this.refs.container;
        this.width = this.container.clientWidth;
        this.height = this.container.clientHeight;
        DomHelper.renderer = new THREE.WebGLRenderer({
            antialias: true,
        });
        this.container.appendChild(DomHelper.renderer.domElement);
        DomHelper.renderer.setSize(this.width, this.height);
        DomHelper.renderer.setClearColor(0xffffff);

        DomHelper.width = this.width;
        DomHelper.height = this.height;

        DomHelper.update();
        
        LoaderHelper.initControls();

        this.animate();
        this.bindEvent();
    }

    update() {
        DomHelper.scene && DomHelper.camera && DomHelper.renderer.render(DomHelper.scene, DomHelper.camera);  
    }

    animate() {
        DomHelper.transformControls && DomHelper.transformControls.update();
        DomHelper.orbitControls && DomHelper.orbitControls.update();
        this.update();
        requestAnimationFrame(() => this.animate());
    }

    bindEvent() {
        window.addEventListener("resize", () => this.handleOnResize(), false);
        DomHelper.renderer.domElement.addEventListener("click", (e)=>this.handleOnMouseClick(e), false);
        DomHelper.renderer.domElement.addEventListener("mouseup", (e)=>this.handleOnMouseUp(e), false);
        DomHelper.renderer.domElement.addEventListener("mousedown", (e)=>this.handleOnMouseDown(e), false);
    }
    handleOnResize() {
        this.width = this.container.clientWidth;
        this.height = this.container.clientHeight;
        DomHelper.camera.aspect = this.width / this.height;
        DomHelper.camera.updateProjectionMatrix();
        DomHelper.renderer.setSize(this.width, this.height);

        DomHelper.width = this.width;
        DomHelper.height = this.height;
    }

    handleOnMouseClick(e) {
        let mesh = this.getPositionMesh(e);
        if (mesh) {
            let id = mesh.data.id;
            if (id === DomHelper.selectedMeshId) {
                this.handleOnSelectedMesh(mesh);
            }
        }
    }

    handleOnMouseUp(e) {
        // 首次点击时不保存数据
        if (DomHelper.selectedItem && DomHelper.selectedItem.data) {
            console.log('handleOnMouseUp handleOnMouseUp handleOnMouseUp handleOnMouseUp', DomHelper.selectedItem.data)
            // this.saveLocalData(DomHelper.selectedItem.data);
        }
    }

    handleOnMouseDown(e) {
        var mesh = this.getPositionMesh(e);
        if (mesh){
            const updateWidget = this.updateWidget;
            DomHelper.selectedMeshId = mesh.data.id;
            DomHelper.updateWidget = (widget) => updateWidget(widget);
        }
    }

    handleOnSelectedMesh(mesh) {
        LoaderHelper.selectedMesh(mesh);
        mesh = mesh.object ? mesh.object : mesh;
        let widgetId = mesh.data.id;
        this.selectWidgetsByIds([widgetId]);
        // this.triggerMaterialWidgetEvent(mesh);
    }

    getPositionMesh(e) {
        this.calculateMousePosition(e);
        DomHelper.raycaster.setFromCamera(DomHelper.mouse, DomHelper.camera);
        let meshes = DomHelper.raycaster.intersectObjects(MeshHelper.getMeshes());
        if (meshes.length) {
            let mesh = meshes[0];
            return mesh.object;
        }
        return null;
    }

    calculateMousePosition(e) {
        let framew = $(this.container).offset().left;
        let frameh = $(this.container).offset().top;
        let clientX = parseInt(e.clientX) - parseInt(framew);
        let clientY = parseInt(e.clientY) - parseInt(frameh);
        DomHelper.mouse.x = (clientX / DomHelper.renderer.domElement.clientWidth) * 2 - 1;
        DomHelper.mouse.y = -(clientY / DomHelper.renderer.domElement.clientHeight) * 2 + 1;
    }

    render() {
        return (
            <div className="editorquyu" ref="container">
                {this.props.children} 
            </div>
        )
    }
}
export default Renderer;
